<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eleShow-Test</title>
    <style>
        body {
            margin: 0px;
            background-color: aquamarine;
        }

        .show {
            position: relative;
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: rgb(54, 54, 54);
        }

        .btn_show {
            position: relative;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="show"></div>
    <button class="btn_show">点击显示或隐藏</button>



    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>
        const show = document.querySelector('.show');
        const btnshow = document.querySelector('.btn_show');
        let flag = 1;
        let flag2 = 1;

        /*  eleShow(): 透明显现动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: start: 初始透明度，取值区间为 [0,1]，类型number
            参数三: end: 终点透明度，取值区间为 [0,1]，类型number
            参数四: interval: 动画时间间隔（ms）
            参数五: step: 动画步数间隔数，最大值1
            参数五: callback: 可选，动画完成后的回调函数
        */

        btnshow.addEventListener('click', () => {
            if (flag === 1) {
                flag = 2;
                eleShow(show, 1, 0, 16, 0.02, () => {
                    flag = 3;
                });
            } else if (flag === 3) {
                flag = 2;
                eleShow(show, 0, 1, 16, 0.02, () => {
                    flag = 1;
                });
            }
        });

        // btnshow.addEventListener('click', () => {
        //     if (flag === 1 && flag2 === 1) {
        //         flag = 2;
        //         flag2 = 2;
        //         eleMov(show, 0, 50, 1000, 'v', 'ease', 2, () => {
        //             flag2 = 3;
        //         });
        //         eleShow(show, 1, 0, 16, 0.05, () => {
        //             flag = 3;
        //         });
        //     } else if (flag === 3 && flag2 === 3) {
        //         flag = 2;
        //         eleMov(show, 50, 0, 1000, 'v', 'ease', 2, () => {
        //             flag2 = 1;
        //         });
        //         eleShow(show, 0, 1, 16, 0.05, () => {
        //             flag = 1;
        //         });
        //     }
        // });
    </script>
</body>

</html>